/* 
1 输入框绑定 值改变事件 Input事件
  1 获取到输入框的值
  2 合法性判断
  3 检验通过 把输入框的值 发送到后台
  4 返回的数据打印到页面上
2 防抖 (防止抖动) 定时器
  0 防抖 一般 输入框中 防止重复输入 重复发送请求
  1 节流 一般是用在页面下拉和上拉 (课下自行研究学习)
  1 定义全局的定时器id
*/
import {
  request
} from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
// pages/search/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    goods: [],
    // 取消 按钮 是否显示
    isFocus:false,
    // 输入框的值
    inpValue:""
  },
  // 全局定时器id, -1~-100都可以,无所谓,始终是从预定的值开始
  TimeId: -1,
  // 输入框的值改变 就会触发的事件
  handleInput(e) {
    // console.log("e", e)
    // 1 获取输入框的值
    const { value } = e.detail;
    // console.log("value:", value)
    // 2 检测合法性
    // console.log("value.trim():", value.trim())
    // const a = Boolean(value.trim())
    // console.log("Boolean(value.trim()):" + a)
    // console.log("Boolean( )", Boolean())
    // value.trim()为空为false,就跳出本次方法,流程
    if (!value.trim()) {
      // 清空数组和isFocus显示按钮的值
      this.setData({
        // 数组重置
        // goods:[],
        goods: [],
        // isFocus改为false
        isFocus:false
      })
      //  值不合法
      return
    }
    /* 
    1 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式.

    2 clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout.
    */
    this.setData({
      isFocus:true
    }) 
    // 3 准备发送请求获取数据 清除定时器, 从零(预先设置的全局变量值TimeId)开始计时间
    clearTimeout(this.TimeId);
    // 1秒钟稳定之后,才发送请求
    // 返回goods:res?! this.qsearch(value); 会返回一个数据源
    // 同时setTimeout定时器,也会返回一个唯一数字,赋值给全局定时器id: TimeId
    this.TimeId = setTimeout(() => {
      // setTimeout第一次可以异步立马执行,但是
      this.qsearch(value);
    }, 1000);
    // 全局定时器TimeId,是会更改的
    console.log("this.TimeId:", this.TimeId)
  },
  // 发送请求获取搜索建议 数据
  async qsearch(query) {
    // 传递第二个参数 data:{query}
    const res = await request({ url: "/goods/qsearch", data: { query } });
    console.log(res)
    this.setData({
      goods: res
    })
  },

  // 点击 取消按钮
  handleCancel(){
    this.setData({
      inpValue:"",
      isFocus:false,
      goods:[]
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})